<template>
    <div>
        <ul>
            <li v-for="item in schoollist" :key="item.id">
                {{ item.school_name }}
            </li>
        </ul>
        <p id="count" @click="addCount">count:{{ count }}</p>
    </div>
</template>

<script>
import axios from 'axios';

// 组件的生命周期钩子函数:
// 定义: 组件在不同的阶段会自动触发一个钩子函数,这些钩子函数被称之为生命周期钩子函数
// 这些函数不需要手动调用, 他会自定执行

// 组件的生命周期钩子函数就是描述一个组件实例从创建到销毁的过程
export default {
    data() {
        return {
            count: 100,
            schoollist: [], // 学校列表数据
            timer: null,
            controller: new AbortController() // 定义一个控制器, 通过该控制器取消请求的操作

        }
    },
    computed: {
        doubleCount() {
            return this.count * 2
        }
    },
    methods: {
        addCount() {
            // console.log('addCount');
            this.count++
        },
        documentClickFn() {
            console.log('document');
        }
    },
    setup() {
        console.log('setup');
        // 该阶段 组件实例初始化前,还没有创建, 所以在该阶段没有this实例
        // 特点: vue3新增的  vue2没有
        // console.log(this); // undefined
    },
    beforeCreate() {
        // 实例初始化完成, 该阶段为组件实例创建前,
        // 特点: 该阶段不可以获取this实例上的data 数据和计算属性.methods 方法等
        // 注意: 该阶段不常用
        console.log('beforeCreate', this);
        // console.log('this上的data 数据', this.count);
        // console.log('this上的计算属性', this.doubleCount);
        // console.log('this上的methods方法', this.addCount);
    },
    created() {
        // 组件实例已将创建完成
        // 特点: 该阶段 配置项中的data数据, 计算属性, methods方法 ,侦听器等等都已经配置完毕
        // 已经挂载到this 实例上,所以可以访问这些值
        // 注意: 该阶段常用, 一般用来进行数据请求 发起数据请求
        console.log('created', this);
        // console.log('this上的data 数据', this.count);
        // console.log('this上的计算属性', this.doubleCount);
        // console.log('this上的methods方法', this.addCount);
        // axios.get('https://api.i-lynn.cn/college', {
        //     params: { //设置get请求参数
        //         page: 1
        //     }
        // }).then(res => {

        //     this.schoollist = res.data.data.list1
        // })
    },
    beforeMount() {
        // beforeMount 表示挂载前, 当前组件对应的模板还没有挂在到父节点上
        // 特点:获取不到当前组件的dom节点, 因为还没有挂载到父节点呢
        // 注意: 不常用
        console.log('beforeMount', this);
        //console.log(document.querySelector('#count')) //null
    },
    mounted() {
        // mounted 表示组件模板对应的dom已经挂载到了父节点, 在页面中可以获取到
        // 特点: 可以获取到dom,该阶段可以进行一写dom 操作
        // 注意: 常用 操作dom  获取进行数据请求
        console.log('mounted', this);
        //console.log(document.querySelector('#count')) //  <p id='count'> count:100</p>
        axios.get('https://api.i-lynn.cn/college', {
            params: { //设置get请求参数
                page: 1
            },
            signal: this.controller.signal  //添加标记: 告诉axios 我这个请求时可以取消的
        }).then(res => {
            // console.log(res);
            this.schoollist = res.data.data.list1
        }).catch(err => { console.log(err); })

        // 设置定时器
        // this.timer = setInterval(() => {
        //     console.log('我是定时器');
        // }, 1000)

        // 绑定事件
        // document.addEventListener('click', this.documentClickFn)


    },


    beforeUpdate() {
        // beforeUpdate: 该阶段数据更新触发, 此时数据绑定dom 节点还没有更新
        // 特点: 真实dom 没有更新, 虚拟dom(描述真实dom 的js对象) 已经创建完成, 还没有转成真实dom
        // 注意: 不常用
        console.log('beforeUpdate', this);
        // console.log(this.count);
        //console.log(document.querySelector('#count').innerHTML);
    },
    updated() {
        // updated : 该阶段: 数据更新后,且 绑定的dom 也更新完毕
        // 特点: 可以获取最新的dom值.可以监听data 中所有值的变化,没有针对性
        // 注意: 不常用
        console.log('updated', this);
        // console.log(document.querySelector('#count').innerHTML);
    },
    beforeUnmount() {
        // beforeUnmount : 组件实例卸载前调用执行
        // 特点: 组件卸载前(组件不渲染的时候)触发
        // 注意: 常用 一般用来清理副作用 
        // 副作用: 清除定时器, 清除事件, 取消请求的操作等等
        console.log('beforeUnmount', this);
        // 清除定时器
        // clearInterval(this.timer)
        // 清除事件
        // document.removeEventListener('click', this.documentClickFn)
        // 取消请求
        this.controller.abort();
    },
    unmounted() {
        // unmounted :组件实例卸载后调用执行
        // 特点: 组件实例已经卸载
        // 注意: 常用  一般用来清理副作用 
        console.log('unmounted', this);

    }




}
</script>
<style scoped></style>